<!--
 * @Date: 2022-03-25 18:24:50
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-03-25 21:13:48
 * @FilePath: \vue3Components\src\components\Notification.vue
 * @Description: 消息通知组件
-->
<template>
  <el-popover placement="bottom" :width="300" trigger="click">
    <template #default>
      <slot></slot>
    </template>
    <template #reference>
      <el-badge :value="value" :is-dot="isDot" :max="max" style="cursor: pointer;">
        <component :is="`el-icon-${toLine(icon)}`" style="width: 1em; height: 1em;"></component>
      </el-badge>
    </template>
  </el-popover>
  <div></div>
</template>
 <script lang='ts' setup>
import { toLine } from '../utils'
const props = defineProps({
  icon: {
    type: String,
    default: 'Bell'
  },
  //通知数量
  value: {
    type: [String, Number],
    default: ''
  },
  //是否显示小圆点
  isDot: {
    type: Boolean,
    default: false
  },
  //最大通知数
  max: {
    type: Number,
  }
})
</script>
<style lang="less" scoped>
.el-popper {
  padding: 0;
}
</style>
